<template>
  <div class="page-container page-container-create">
    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>叠加活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加叠加管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="formData mb30">
      <el-form ref="formData" :model="formData" :rules="rules" inline v-if="showFlag">
        <el-row :gutter="20">
          <el-form-item label="叠加名称：" prop="overlayName" required>
            <el-input v-model="formData.overlayName" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="openPopDialogVisible('formData')">新增叠加规则</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-row class="t_l mt20 info">
        <p class="tips">提示：</p>
        <div>
          <p>1、赠送类促销、换购促销可以与满量促销、满额促销进行叠加；</p>
          <p>2、优惠券和红包可以与其他所有活动进行叠加；</p>
          <p>3、除以上规则，其他类型的活动不能进行叠加；</p>
        </div>
      </el-row>
      <el-row>
        <el-button type="primary" @click="rebock">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </el-row>
    </div>
    <div  :class="[{rulenoborder:!overlayIds},'rule']">
      <div v-for="(item,index) in initData" :key="index">
        <div class="flex">
          <p>叠加使用</p>
          <div>
            <el-checkbox class="mr30" v-model="item.checked" @change="setChecked(item)">总额减</el-checkbox>
            <el-button type="primary" @click="openPopDialogVisible2(index)">添加活动</el-button>
          </div>
        </div>
        <el-table :data="item.promotionInfoList" border class="table">
          <el-table-column label="序号" prop="id"></el-table-column>
          <el-table-column label="类型" prop="promType"></el-table-column>
          <el-table-column label="ID" prop="promotionId"></el-table-column>
          <el-table-column label="优惠券名称" prop="promName"></el-table-column>
          <el-table-column label="活动开始/结束时间" prop="startTime,endTime">
            <template slot-scope="scope">{{scope.row.startTime}}/{{scope.row.endTime}}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click="handleDelete(scope.$index, scope.row,item)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 弹出框部分 -->
      <el-dialog title="添加" :visible.sync="pop.dialogVisible">
        <div>
          <el-form ref="popFormData" :model="popFormData" inline>
            <el-form-item class="mb30" label="活动名称：" prop="overlayName">
              <el-input v-model="popFormData.overlayName"></el-input>
            </el-form-item>
            <el-form-item class="mb30" label="活动ID：" prop="promotionId">
              <el-input v-model="popFormData.promotionId"></el-input>
            </el-form-item>
            <el-form-item class="mb30" label="类型：" prop="type">
              <el-select v-model="popFormData.type" placeholder="请选择">
                <el-option
                  v-for="item in popFormData.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-row class="t_r mb30">
            <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" plain @click="resetForm('popFormData')">重置</el-button>
          </el-row>
        </div>
        <template v-if="pop.hide">
          <el-row>
            <el-col class="mb30 t_l">
              <el-radio label="2" v-model="pop.radio" class="mr30">两个叠加</el-radio>
              <el-radio label="3" v-model="pop.radio">三个叠加</el-radio>
            </el-col>
          </el-row>
          <div class="tab-container">
            <el-tabs type="border-card" v-model="pop.activeName" @tab-click="handleClick">
              <el-tab-pane label="选择活动" name="first">
                <el-table
                  :data="pop.firstData"
                  border
                  class="table"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column label="活动ID" prop="promotionId"></el-table-column>
                  <el-table-column label="活动名称" prop="promName"></el-table-column>
                  <el-table-column label="活动时间" prop="startTime,endTime">
                    <template slot-scope="scope">{{scope.row.startTime}} - {{scope.row.endTime}}</template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="small"
                        type="text"
                        @click="handleAddPop(scope.$index, scope.row)"
                      >添加</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div v-if="pop.firstData.length>0" class="t_r">
                  <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="pop.start"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pop.firstTotal"
                  ></el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane :label="'已添加活动('+pop.secondData.length+')'" name="second">
                <el-table
                  :data="pop.secondData"
                  border
                  class="table"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column label="活动ID" prop="promotionId"></el-table-column>
                  <el-table-column label="活动名称" prop="promName"></el-table-column>
                  <el-table-column label="活动时间" prop="startTime,endTime">
                    <template slot-scope="scope">{{scope.row.startTime}} - {{scope.row.endTime}}</template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="small"
                        type="text"
                        @click="handleDeletePop(scope.$index, scope.row)"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div v-if="pop.secondData.length>0" class="t_r">
                  <el-pagination
                    class="pagination"
                    @current-change="handleCurrentChange"
                    :current-page="pop.start"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pop.secondTotal"
                  ></el-pagination>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </template>
        <template v-else>
          <el-table
            :data="pop.firstData"
            border
            class="table"
            @selection-change="handleSelectionChange"
          >
            <el-table-column label="活动ID" prop="promotionId"></el-table-column>
            <el-table-column label="活动名称" prop="promName"></el-table-column>
            <el-table-column label="活动时间" prop="startTime,endTime">
              <template slot-scope="scope">{{scope.row.startTime}} - {{scope.row.endTime}}</template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="small" type="text" @click="submitGroup(scope.$index, scope.row)">添加</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="pop.firstData.length>0" class="t_r mb30">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pop.start"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pop.firstTotal"
            ></el-pagination>
          </div>
        </template>
        <div class="t_l info">
          <div class="tips">提示：</div>
          <div>
            <p>1、赠送类促销、换购促销可以与满量促销、满额促销进行叠加；</p>
            <p>2、优惠券和红包可以与其他所有活动进行叠加；</p>
            <p>3、除以上规则，其他类型的活动不能进行叠加；</p>
          </div>
        </div>

        <span slot="footer" class="dialog-footer" v-if="pop.hide">
          <el-button type="primary" plain @click="pop.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="pop.dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      showFlag:false,
      openPopDialogVisible2Index:0,
      overlayIds: "",
      overlayPromotionInfoList: [],
      formData: {
        overlayName: ""
      },
      initData: [],
      rules: {
        overlayName: [
          { required: true, message: "请输入叠加名称" },
          { min: 3, message: "大于3个字符", trigger: "change" }
        ]
      },
      popFormData: {
        type: "1",
        overlayName: "",
        overlayId: "",
        options: [
          {
            value: "1",
            label: "单一"
          },
          {
            value: "2",
            label: "满量"
          },
          {
            value: "3",
            label: "满额"
          },
          {
            value: "4",
            label: "秒杀"
          },
          {
            value: "5",
            label: "赠送"
          },
          {
            value: "6",
            label: "组合"
          },
          {
            value: "7",
            label: "单品X"
          },
          {
            value: "8",
            label: "换购"
          },
          {
            value: "9",
            label: "预售"
          },
          {
            value: "10",
            label: "拼团"
          },
          {
            value: "11",
            label: "优惠券"
          },
          {
            value: "12",
            label: "红包"
          },
          {
            value: "13",
            label: "抽奖"
          }
        ]
      },
      pop: {
        //弹框
        dialogVisible: false,
        radio: "2",
        activeName: "first",
        firstData: [],
        secondData: [],
        start: 1,
        limit: 10,
        firstTotal: 0,
        secondTotal: 0,
        hide: false
      }
    };
  },
  methods: {
    init(id) {
      let sendData = {
        overlayId: id
      };
      this.utils.request.queryOverlayGroup(sendData, res => {
        if (res.code == "0000" && res.data && res.data.groupInfoList) {
          res.data.groupInfoList.forEach(f => {
            if (f.fullAmountReduceFlag == 1) {
              f.checked = true;
            } else {
              f.checked = false;
            }
          });
          this.initData = res.data.groupInfoList;
          this.overlayIds = res.data.overlayId;
        } else {
          this.$message({
            message: "操作失败, " + res.msg,
            type: "error"
          });
        }
      });
    },
    popInit() {
      let sendData = {
        start: this.pop.start,
        limit: this.pop.limit,
        overlayName: this.popFormData.overlayName
          ? this.popFormData.overlayName
          : null,
        promotionId: this.popFormData.promotionId
          ? this.popFormData.promotionId
          : null,
        promType: this.popFormData.type
      };
      this.utils.request.queryPagePromotion(sendData, res => {
        if (res.code == "0000" && res.data && res.data.rows) {
          this.pop.firstData = res.data.rows;
          this.pop.firstTotal = res.data.total;
        } else {
          this.$message({
            message: "操作失败, " + res.msg,
            type: "error"
          });
        }
      });
    },
    search() {
      this.popInit();
    },
    //新增规则按钮添加
    submitGroup(item, row) {
      let arr = [this.pop.firstData[item]];
      let sendData = {
        overlayGroupId: this.initData[this.openPopDialogVisible2Index].overlayGroupId,
        overlayId: this.overlayIds,
        overlayPromotionInfoList: arr
      };
      this.utils.request.addOverlayGroupPromotion(sendData, res => {
        if (res.code == "0000") {
          this.$message({ message: "操作成功", type: "success" });
          this.pop.dialogVisible = false;
          this.init(this.$route.query.overlayId);
          this.$router.push({path:"/pages/promotionManagement/overlayPromotion/index"});
        } else {
          this.$message({
            message: "操作失败, " + res.msg,
            type: "error"
          });
        }
      });
    },
    //直接 按钮添加
    submit(item) {
      let sendData = {
        overlayName: this.formData.overlayName,
        overlayType: this.pop.radio,
        overlayPromotionInfoList: this.pop.secondData
      };
      this.utils.request.addOverlayRule(sendData, res => {
        if (res.code == "0000") {
          this.$message({ message: "操作成功", type: "success" });
          this.rebock();
          this.pop.dialogVisible = false;
          this.init(res.data);
        } else {
          this.$message({
            message: "操作失败, " + res.msg,
            type: "error"
          });
        }
      });
    },
    rebock(){
      this.$router.push({path:"/pages/promotionManagement/overlayPromotion/index"});
    },
    resetForm(formName) {
      console.log(formName);
      this.$refs[formName].resetFields();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //删除叠加规则组
    handleDeleteGroup(index, row) {
      this.$confirm("确认删除吗？", "提示", {}).then(() => {
        var params = {
          ids: row.id
        };
        var that = this;
        this.utils.request.deleteOverlayGroupPromotion(params, function(res) {
          if (res.code == "0000") {
            that.$message({ message: "操作成功", type: "success" });
          } else {
            that.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      });
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //打开活动规则组
    openPopDialogVisible(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.pop.hide = true;
          this.pop.dialogVisible = true;
          this.popInit();
        } else {
          return false;
        }
      });
    },
    openPopDialogVisible2(index) {
      this.openPopDialogVisible2Index=index
      this.pop.hide = false;
      this.pop.dialogVisible = true;
    },
    //选择活动 添加
    handleAddPop(index, row) {
      if (this.pop.secondData.length > 5) {
        this.$message({ message: "最多只能添加6条活动" });
        return;
      }
      let params={
        source: {
          promType: row.promType,
          promotionId:  row.promotionId
        },
        targetList:this.pop.secondData
      }
      var that = this;
      this.utils.request.checkPromType(params, function(res) {
          if (res.code == "0000") {
            that.$message({ message: "添加成功", type: "success" });
            that.pop.firstData.splice(index, 1);
            that.pop.secondData.push(row);
            that.pop.firstTotal--;
            that.pop.secondTotal++;
          } else {
            that.$message({
              message: "添加操作, " + res.msg,
              type: "error"
            });
          }
        });
    },
    // 已添加活动删除
    handleDeletePop(index, row) {
      this.pop.secondData.splice(index, 1);
      this.pop.firstData.push(row);
      this.pop.firstTotal++;
      this.pop.secondTotal--;
    },
    setChecked(item) {
      let sendData = {
        overlayGroupId: item.overlayGroupId,
        overlayId: this.overlayIds
      };
      if (item.checked) {
        sendData.fullAmountReduceFlag = 1;
      } else {
        sendData.fullAmountReduceFlag = 0;
      }
      this.utils.request.setFullAmountReduce(sendData, res => {
        if (res.code == "0000") {
          this.$message({ message: "操作成功", type: "success" });
        } else {
          this.$message({
            message: "操作失败, " + res.msg,
            type: "error"
          });
        }
      });
    },
    handleDelete(index, row, item) {
      let sendData = {
        overlayGroupId: item.overlayGroupId,
        overlayId: this.overlayIds,
        overlayPromotionInfo: {
          promType: row.promType,
          promotionId: row.promotionId
        }
      };
      this.utils.request.deleteOverlayGroupPromotion(sendData, res => {
        if (res.code == "0000") {
          this.$message({ message: "操作成功", type: "success" });
          this.init(this.$route.query.overlayId);
        } else {
          this.$message({
            message: "操作失败, " + res.msg,
            type: "error"
          });
        }
      });
    },
    //多选
    handleSelectionChange(val) {
      let v = val.map(m => {
        return {
          promType: m.promType,
          promotionId: m.promotionId
        };
      });
      this.overlayPromotionInfoList = v;
    }
  },
  mounted() {
    if (this.$route.query.overlayId) {
      this.init(this.$route.query.overlayId);
      this.showFlag=false;
    }else{
      this.showFlag=true;
    }
  }
};
</script>
<style scoped lang="scss">
  @import '../../../../assets/css/public.scss';
.rule {
  border: 1px solid #999;
  padding: 20px;
  .table {
    margin: 20px 0;
  }
  .flex {
    justify-content: space-between;
  }
  &.rulenoborder{border:0;}
}
.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
.info{
  font-size: 12px;
}
</style>;
